import React, { PropTypes, Component } from 'react'
import { SketchPicker } from 'react-color';
import ImageModal from './ImageModal';

class Sketch extends Component {
 constructor(props, context) {
    super(props, context)
    this.state = {
      displaySketch:false,
      displayImageModal:false,
      color:this.props.color
    }
  }


   handleChangeComplete (color)  {
     this.props.handleBackColor(this.props.id,color.hex)
     this.setState({
      color:color.hex
     })
  }

  showSketch(){
    this.setState({
      displaySketch:!this.state.displaySketch
    })
  }
  toggleImageModal(){
    this.setState({
      displayImageModal:!this.state.displayImageModal
    })
  }
  render() {
    return (
      <div>
          <div className="btn btn-image" 
               onClick={this.toggleImageModal.bind(this)}
               >
            <i className="fa fa-circle-thin"></i>图片
          </div> 
          <div className="btn btn-color"
               onClick={this.showSketch.bind(this)}
                >
            <i className="fa fa-cloud"></i>颜色
          </div>
         
             {this.state.displayImageModal? 
                <ImageModal 
                    id={this.props.id}
                    displayImageModal={this.state.displayImageModal}
                    toggleImageModal={this.toggleImageModal.bind(this)}
                    handleBackImage={this.props.handleBackImage.bind(this)}
                 />
                :null}
          
          <div className="sketch">
            {this.state.displaySketch?<SketchPicker 
              color={this.state.color}
           onChangeComplete={ this.handleChangeComplete.bind(this) }
      />:null}
          </div>
        
      </div>)
  }

 

}
export default Sketch